<template>
  <div>
    <el-row type="flex">
      <el-col :span="8">
        <el-input
          placeholder="请输入搜索内容"
          v-model="search"
          clearable
          size="medium"
          @keyup.enter.native="searchData"
        >
          <template slot="prepend">
            <el-button @click="fullSelect">{{btnName}}</el-button>
          </template>
        </el-input>
      </el-col>
    </el-row>
    <el-checkbox-group v-model="posItems" size="small" @change="hanlerChange">
      <el-checkbox
        v-for="(item,index) in tabs"
        v-bind:key="index"
        :label="item.Id"
        border
        style="margin-top:20px"
        @change="optionMonPos($event,item.Id,item.Name,item.Name)"
      >{{item.Name}}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  props: {
    monPos: Array,
    tagId: {
      type: String,
      defalut: ''
    }
  },
  computed: {
    btnName () {
      if (this.monPos1.length == this.tabs.length) this.clearOnOff = false
      else if (this.monPos1.length === 0) this.clearOnOff = true
      return this.clearOnOff ? '全选' : '清空'
    }
  },
  data () {
    return {
      posItems: [],
      monPos1: this.monPos,
      clearOnOff: false,
      search: '',
      tempTagId: '',
      tabs: [
        // {
        //   Id: '0000-0000-0000-0001',
        //   Name: '点位1'
        // },
        // {
        //   Id: '0000-0000-0000-0002',
        //   Name: '点位2'
        // }
      ]
    }
  },
  watch: {
    tagId () {
      // console.log('tag changed')
      this.getPosByTagID()
    }
  },
  mounted: function () {
    if (this.tagId != '') this.getPosByTagID()
  },
  methods: {
    fullSelect () {
      this.monPos1.splice(0, this.monPos1.length)
      this.posItems.splice(0, this.posItems.length)
      if (this.clearOnOff) {
        this.tabs.forEach(e =>
          this.monPos1.push({
            PositionId: e.Id,
            PositionName: e.Name
          })
        )
        this.tabs.forEach(e => this.posItems.push(e.Id))
      } else {
        // this.monPos1.splice(0, this.monPos1.length)
      }
      this.clearOnOff = !this.clearOnOff
    },
    optionMonPos (val, id, name) {
      if (val) {
        // 增加
        this.monPos1.push({
          PositionId: id,
          PositionName: name
        })
      } else {
        // 去掉
        console.log('去掉')
        this.monPos1.forEach(e => {
          e.PositionId == id
            ? this.monPos1.splice(this.monPos1.indexOf(e), 1)
            : ''
        })
        console.log(this.monPos1)
      }
    },
    hanlerChange () {
      this.$emit('update:monPos', this.monPos1)
    },
    searchData () {
      if (this.search != '') {
        console.log('search something' + this.search)
        // 搜索是
      }
    },
    getPosByTagID () {
      // console.log('调用成功' + this.tagId)
      this.axios
        .get('/Project/GetMonPos', {
          params: { tagId: this.tagId }
        })
        .then(response => {
          this.tabs = response.data
          console.log(this.tabs)
        })
    }
  }
}
</script>

<style lang="stylus">
.el-button
  overflow hidden
// .el-table .cell, .el-table th div
.cell
  overflow initial !important
</style>
